<template>
  <el-form ref="spuFormRef" :rules="spuFormRules" label-width="100px" :model="spuInfo">
    <el-form-item label="SPU名称" prop="spuName">
      <el-input v-model="spuInfo.spuName" placeholder="SPU名称"></el-input>
    </el-form-item>
    <el-form-item label="SPU品牌" prop="tmId">
      <el-select placeholder="请选择" v-model="spuInfo.tmId">
        <el-option v-for="tm in trademarkList" :key="tm.id" :label="tm.tmName" :value="tm.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述" prop="description">
      <el-input :rows="4" v-model="spuInfo.description" placeholder="请输入SPU描述" type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="SPU图片" prop="spuImageList">
      <el-upload v-model:file-list="spuInfo.spuImageList" :action="`${baseUrl}/admin/product/fileUpload`" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="销售属性" prop="spuSaleAttrList">
      <el-select :placeholder="`还有${filterBaseSaleAttrList.length}个未选择`" v-model="spuInfo.spuSaleAttr">
        <el-option v-for="baseSaleAttr in filterBaseSaleAttrList" :key="baseSaleAttr.id" :value="`${baseSaleAttr.id}:${baseSaleAttr.name}`" :label="baseSaleAttr.name"></el-option>
      </el-select>
      <el-button type="primary" :disabled="!spuInfo.spuSaleAttr" :icon="Plus" style="margin-left:10px" @click="toAddBaseSaleAttr">添加销售属性</el-button>
    </el-form-item>
    <el-form-item label="">
      <el-table border :data="spuInfo.spuSaleAttrList">
        <el-table-column label="序号" type="index" align="center" width="90px"></el-table-column>
        <el-table-column label="属性名" prop="saleAttrName" width="100px"></el-table-column>
        <el-table-column label="属性值名称列表">
          <template v-slot="{row}">
            <el-tag v-for="(tag,index) in row.spuSaleAttrValueList" 
            :key="tag" class="mx-1" 
            closable :disable-transitions="false" 
            style="margin-right:4px" 
            @close="handleClose(row,index)">
              {{ tag.saleAttrValueName }}
            </el-tag>
            <el-input v-if="row.inputVisible" ref="InputRef" 
            v-model="inputValue" class="ml-1 w-20"
             size="small" style="width:100px" 
             @keyup.enter="handleInputConfirm(row)"
              @blur="handleInputConfirm(row)" />
            <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput(row)">
              +
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row,$index}">
            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" title="真的要删除此属性吗?" @confirm="toDeleteAttr($index)">
              <template #reference>
                <div style="display: inline-block;margin-left:10px">
                  <el-tooltip class="box-item" effect="dark" content="删除属性值" placement="top">
                    <el-button type="danger" size="small" :icon="Delete"></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitSpuForm(spuFormRef)">保存</el-button>
      <el-button @click="emits('changeStatus',ShowStatus.SPU_LIST)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'SpuForm'
});
</script>
<script setup lang="ts">
import { ref, onMounted, reactive, computed, nextTick } from 'vue';
import { Plus, Delete } from '@element-plus/icons-vue';
import { ShowStatus } from '../types';
import { ElMessage, ElInput, type UploadProps, type UploadUserFile, type FormRules, type FormInstance } from 'element-plus';
import { reqGetAllTrademarkList, reqGetBaseSaleAttrList, reqGetSpuImageList, reqGetSpuSaleAttrList, reqSaveSpuInfo } from '@/api/product/spu';
import { useCategoryListStore } from '@/stores/categorySelector';
const categoryStore = useCategoryListStore();
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const fileList = ref<UploadUserFile[]>([]);
const trademarkList = ref([]); // 品牌列表数据
const baseSaleAttrList = ref([]); // 销售属性列表数据
const props = defineProps(['currentSpuInfo']);
const emits = defineEmits(['changeStatus']);

const inputValue = ref('');
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();
const spuFormRef = ref();
const baseUrl = import.meta.env.VITE_API_URL;
// const initSpuInfo = ()=>{}
const spuInfo = reactive({
  spuName: '', // spu名称
  category3Id: 0, // 三级id
  tmId: '', // spu品牌
  description: '', // spu描述
  spuImageList: [], // 要上传的图片列表
  spuSaleAttrList: [], // 销售属性
  spuSaleAttr: '', // 额外添加的属性 用来收集属性名
  ...props.currentSpuInfo
});



const spuFormRules = reactive<FormRules>({
  spuName: [
    { required: true, message: '请输入spu名称', trigger: 'blur' },
    { min: 1, max: 10, message: '品牌名称应该是在1到10之间', trigger: 'blur' }
  ],
  tmId: [{ required: true, message: '请选择spu品牌', trigger: 'change' }],
  description: [{ required: true, message: '请添加spu描述', trigger: 'blur' }],
  spuImageList: [
    {
      required: true,
      message: '请至少上传一张图片',
      trigger: 'change'
    }
  ],
  spuSaleAttrList: [
    {
      required: true,
      message: '请至少选择一个销售属性',
      trigger: 'change'
    }
  ]
});


// 1. 一次性获取所有的品牌和销售属性
onMounted(async () => {
  try {
    let promises = [reqGetAllTrademarkList(), reqGetBaseSaleAttrList()];
    const id = spuInfo.id;
    if (id) {
      promises = promises.concat([reqGetSpuImageList(id), reqGetSpuSaleAttrList(id)]);
    }
    // const [resTrademarkList, resBaseSaleAttrList] = await Promise.all(promises);
    const [resTrademarkList, resBaseSaleAttrList, resSpuImageList, resSpuSaleAttrList] = await Promise.all(promises);
    console.log('acc', resTrademarkList, resBaseSaleAttrList, resSpuImageList, resSpuSaleAttrList);

    trademarkList.value = resTrademarkList;
    baseSaleAttrList.value = resBaseSaleAttrList;

    if (resSpuImageList && resSpuSaleAttrList) {
      spuInfo.spuImageList = resSpuImageList.map(item => {
        return {
          ...item,
          name: item.imgName,
          url: item.imgUrl
        };
      });
      spuInfo.spuSaleAttrList = resSpuSaleAttrList;
    }

    console.log('acc', resTrademarkList, resBaseSaleAttrList, resSpuImageList, resSpuSaleAttrList);
  } catch (error) {
    ElMessage.error('品牌或是销售属性获取失败了...');
  }
});

// 2. 图片上传之前的校验
const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
  const imgArr = ['image/jpeg', 'image/png'];

  if (!imgArr.includes(rawFile.type)) {
    ElMessage.error('图片格式必须是"image/jpeg或image/png"!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2M!');
    return false;
  }
  return true;
};

// 3. 图片上传成功之后的链接地址
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
  spuInfo.spuImageList = uploadFiles;
  // 清除校验规则
  spuFormRef.value?.clearValidate(['spuImageList']);
};

// 4. 删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, uploadFiles)
  spuInfo.spuImageList = uploadFiles;
};

// 5. 图片预览
const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

// 6. 添加销售属性
const toAddBaseSaleAttr = () => {
  const spuSaleAttrList = spuInfo.spuSaleAttrList;
  if (spuSaleAttrList.length && spuSaleAttrList.some(item => item.spuSaleAttrValueList.length === 0)) {
    ElMessage({
      type: 'error',
      message: '有属性值为空,请添加属性值...'
    });
    return
  }

  const [baseSaleAttrId, saleAttrName] = spuInfo.spuSaleAttr.split(':');
  spuInfo.spuSaleAttrList.push({
    inputVisible: false,
    baseSaleAttrId, 
    saleAttrName, 
    spuSaleAttrValueList: [] 
  });

  spuInfo.spuSaleAttr = '';
};

// 7. 使用计算属性来实现销售属性的添加时的移除效果
const filterBaseSaleAttrList = computed(() => {
    return baseSaleAttrList.value.filter(baseSaleAttr => {
     return !spuInfo.spuSaleAttrList.find(item => item.saleAttrName === baseSaleAttr.name);
  });
});

// 8. 删除销售属性
const toDeleteAttr = index => {
  spuInfo.spuSaleAttrList.splice(index, 1);
};

// 9. 当单击添加销售属性值按钮的时候 进行切换
const showInput = row => {
  row.inputVisible = true; 
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

// 10. 收集销售属性值  
const handleInputConfirm = row => {
  if (inputValue.value) {
    // 判断当前添加的内容是否与之前的内容重复
    const attrValue = row.spuSaleAttrValueList.find(item => item.saleAttrValueName === inputValue.value);
    if (attrValue) {
      ElMessage.error('当前属性值与之前的重复,请换一个...');
      row.inputVisible = false;
      inputValue.value = '';
      return;
    }

    const { baseSaleAttrId, saleAttrName } = row;
    row.spuSaleAttrValueList.push({
      baseSaleAttrId,
      isChecked: '0',
      saleAttrName,
      saleAttrValueName: inputValue.value
    });
  }
  row.inputVisible = false;
  inputValue.value = '';
};

// 11. 删除某个销售属性值
const handleClose = (row, index) => {
  row.spuSaleAttrValueList.splice(index, 1);
};

// 13. 实现spuInfo的添加
const submitSpuForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      spuInfo.category3Id = categoryStore.category3Id;
      spuInfo.spuImageList = spuInfo.spuImageList.map(item => {
        return {
          imgName: item.name,
          imgUrl: item.response?.data
        };
      });

      // 判断销售属性值是否为空
      const spuSaleAttrList = spuInfo.spuSaleAttrList;
      const flag = spuSaleAttrList.length && spuSaleAttrList.every(item => item.spuSaleAttrValueList.length !== 0);
      if (!flag) {
        ElMessage.error('有属性值为空,请添加');
        return;
      }
      // 发送请求 实现spu数据的添加
      await reqSaveSpuInfo(spuInfo);
      // 提示用户 添加成功了
      ElMessage.success('添加spu数据成功了');
      emits('changeStatus', ShowStatus.SPU_LIST);
    } else {
      console.log('error submit!', fields);
    }
  });
};
</script>

<style scoped>
</style>